<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <style>
        .hello{
            border: 1px solid red;
        }
    </style>
    <script>
        $(function(){
            $('#tb').textbox({
                /**
                 * 属性
                 */
                // width:'400px',
                width:400,
                // height:200,
                // cls:'hello',
                prompt:'请输入用户名',
                // value:'tom',
                // type:'password',
                label:'用户名：',
                labelWidth:100,
                // labelPosition:'top',
                labelAlign:'right',
                // multiline:true,
                // editable:false,
                // disabled:true,
                // readonly:true,
                icons:[
                    {
                        iconCls:'icon-add',
                        handler:function(e){
                            // console.log(e.data.target); // 当前的DOM对象
                            // console.log($(e.data.target).val('tom'));
                            // e.data.target.value='tom';

                            //  调用方法：jQuery.插件名(方法名,参数)
                            // console.log($(e.data.target).textbox('getValue')); // 获取值
                            $('#tb').textbox('setValue','tom'); // 设置值
                        }
                    },
                    {
                        iconCls:'icon-remove',
                        handler:function(){
                            console.log(222);
                        }
                    },
                ],
                iconCls:'icon-man',
                iconAlign:'left',
                // iconWidth:50,
                buttonText:'搜索',
                buttonIcon:'icon-search',
                // buttonAlign:'left',
                required:true,
                /**
                 * 事件
                 */ 
                onChange:function(newValue, oldValue){
                    console.log(newValue,oldValue);
                },
                onClickButton(){ // JavaScript新语法：当对象的属性取值为匿名函数时，可以省略function关键字
                    console.log('执行搜索的功能');
                }  
            })
        });
    </script>
</head>
<body>
    <input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">
    <hr>

    <input id="tb" type="text" style="width:300px">

    
</body>
</html>